<template>
	<view class="top">
		<view class="icon"></view>
		<text>卡片列表</text>
	</view>
	<view class="box">
		<image src="../../static/下载.png" mode="aspectFit"></image>
		<view class="current">
			<text>当前</text>
		</view>
		<view style="font-size: 17px; padding: 10px 0;">
			<text>充值号:{{is_text.number}}</text>
		</view>
		<view>
			<text>余额:{{is_text.money}}元</text>
		</view>
		<view class="box2">
			<text>备注:{{is_text.text}}</text>
			<view class="button" @click="popup.open()">
				<text>添加备注</text>
			</view>
		</view>
	</view>
	<uni-popup ref="popup" type="dialog">
		<uni-popup-dialog mode="input" title="输入备注信息8个字以内" @confirm="confirm"></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const is_text = ref({
		number: '12345678910',
		money: '0.00',
		text: ''
	})
	const popup = ref()

	function confirm(value) {
		if (value.length < 9) {
			is_text.value.text = value;
		} else {
			uni.showToast({
				title: '输入内容超过8个字符',
				icon: 'none',
				duration: 2000
			});
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		padding: 15px;
		display: flex;
		align-items: center;

		.icon {
			width: 2px;
			height: 15px;
			margin-right: 15px;
			background-color: rgb(0, 85, 255);
		}
	}

	.box {
		color: white;
		margin: 0 15px;
		width: calc(100vw - 60px);
		padding: 10px 15px 20px;
		font-size: 14px;
		background-image: linear-gradient(to right, #1E6CE6, #4591F8);
		border-radius: 10px;
		position: absolute;

		image {
			width: 28vw;
			height: 28vw;
			position: absolute;
			z-index: 1;
			bottom: 0;
			right: 10px;
		}

		.current {
			padding: 2px 8px 4px;
			background-color: red;
			position: absolute;
			top: 0;
			right: 0;
			border-radius: 0 10px 0 10px;
		}

		.box2 {
			position: relative;
			z-index: 2;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.button {
				padding: 5px 10px;
				border-radius: 5px;
				border: 1px solid white;
			}
		}
	}
</style>